<template>
  <div class="header-widget">
    <div class="app-layout header-inner">
      <div class="button-aside">
        <div class="menu-icon" @click="clickShow">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="header-logo">
        <div class="logo router-link-active">JOJO</div>
      </div>
      <div class="space"></div>
      <div class="aside-right">
        <div class="right-item">
          <div class="common-button">连接钱包</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: null,
    },
  },
  data: () => ({}),
  methods: {
    clickShow() {
      this.$emit("showDialog");
    },
  },
};
</script>
<style  lang="scss" scoped>
@import "./../common/styles/common.scss";
.header-widget {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  .header-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;
    height: 68px;
    padding: 0 15px;
  }
  .app-layout {
    width: 100vw;
    overflow: hidden;
  }
  .button-aside {
    display: block;
    margin-right: 8px;
    margin-left: -8px;
    .menu-icon {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 32px;
      width: 33px;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      svg {
        fill: #431216;
        width: 72%;
      }
    }
  }
  .header-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .logo {
      display: block;
      height: 32px;
      width: 108px;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 0;
      background-image: url("./../assets/images/home/logo.png");
      text-indent: -999em;
      margin-right: 0;
      -webkit-transform: translateY(-3px);
      transform: translateY(-3px);
    }
  }
  .space {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .aside-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    .right-item {
      margin-left: 12px;
    }
    .common-button {
      border: 0 none;
      color: #431216;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      outline: none;
      text-align: center;
      cursor: pointer;
      font-weight: 700;
      padding: 0 18px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-radius: 12px;
      -webkit-transition: -webkit-transform 0.2s ease;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      line-height: 1.1;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 32px;
      padding: 0 10px;
      font-size: 12px;
      background: #fad551;
      border-radius: 8px;
    }
  }
}
</style>